<template>
	<div class="recycle">
		<div class="recycle_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">回收站<i class="el-icon-close"></i></div>
		</div>
		<div class="recycle_bottom">
			<div class="recycle_bottom_new">
				<div class="recycle_bottom_new_goods">
					<div class="recycle_bottom_new_goods_btn">
						<button  @click="handleAddshop"><i class="el-icon-edit"></i>新增商品</button>
					</div>
					<div class="recycle_bottom_new_goods_screening">
						<div class="recycle_bottom_new_goods_screening_left">
							<i>商品分类</i>
							<el-cascader @change="handerChange" :options="cateList" :props="cate" :show-all-levels="false" clearable></el-cascader>
						</div>
						<div class="recycle_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入商品信息查询"></el-input>
							<button @click="handerSearch"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
			<el-tabs v-model="activeName" v-if="sale_type==1" @tab-click="handleClick" style="padding:0 20px;">
				<el-tab-pane label="家居" name="1"></el-tab-pane>
				<el-tab-pane label="泛家居" name="2"></el-tab-pane>
			</el-tabs>
			<div class="recycle_bottom_table_box">
				<div class="recycle_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>商品号</th>
							<th>商品</th>
							<th>价格</th>
							<th>库存</th>
							<th>销量</th>
							<th>属性</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.product_id}}</td>
							<td>{{v.product_title}}</td>
							<td>{{v.price}}</td>
							<td>{{v.num == null ? '0' : v.num}}</td>
							<td>{{v.volume}}</td>
							<td>{{v.status == 1 ? '上架' : '下架'}}</td>
							<td>
								<button class="editor" @click="handerNewShop(v.product_id)">编辑</button>
								<button class="shelves" @click="restore(v.product_id)">恢复</button>
								<button class="delete" @click="del(v.product_id)">删除</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="8">当前数据空空如也</td></tr>
					</table>
				</div>
			</div>
		</div>
		<div class="recycle_bottom_page">
			<div class="recycle_bottom_page_left">
				<div class="recycle_bottom_page_left_checkAll" @click="handerCheckAll">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
          <div class="checkbox-botton">全选</div>
				</div>
				
					<el-button type="primary" @click="selectDel" :disabled="openIsDisabled ">彻底删除</el-button>
			</div>
			<div class="recycle_bottom_page_right">
				 <el-pagination
				      @size-change="handleSizeChange"
				      @current-change="handleCurrentChange"
				      :current-page="page"
				      :page-sizes="[10, 20, 30, 40]"
				      :page-size="pageSize"
				      layout="total, sizes, prev, pager, next, jumper"
				      :total="total"
					  background>
				    </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
		     return {
				input:'',
				checkAll:false,
				page:1,
				pageSize:10,
				total:0,
				checkBoxAll:[],				// 选中的数据
				shelvesAlls:[],
				value: '',					// 分类
				cateList:[],
				cate:{
					value: 'cate_id',
					label: 'cate_name',
					children: 'child',
					expandTrigger: 'hover'
				},
				tableList:[],
				store_id:'',
				openIsDisabled :false, //按钮的禁用
				activeName:'1', 
      			sale_type:1   
			}
		},
		mounted() {
      		let sid = localStorage.getItem('sid')
      		this.store_id = sid
			this.sale_type = localStorage.getItem('sale_type')
			if(this.sale_type==2){
				this.activeName = '2'
			}
			this.init();
		},
		methods: {
			init() {
				let params = {
					sale_type:this.activeName,
					page:this.page,
					pagesize:this.pageSize,
					keyword:this.input,
					cate_id:this.value,
					store_id:this.store_id
				}
				this.$http.post('/api/admin/shop/product/backLst',params) .then(res => {
          			console.log(res,123456);
					if(res.code == 1) {
						this.tableList = res.data.data;
						if(this.tableList.length==0){
							this.openIsDisabled = true
						}else{
							this.openIsDisabled = false
						}
						this.total = res.data.count;
					}
				});
				this.$http.get('/api/admin/shop/Cate/cateLst',{}).then(res => {
					if(res.code == 1) {
            let cate_list = res.data.filter(item=>item.child)
            this.cateList = cate_list;
					}
				});
			},

			
			// 切换tab
			handleClick(){
			this.init()
			},
		// 新增商品按钮
			handleAddshop() {
				console.log(123);
				this.$router.push({name:'newShop'});
			},
		   // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].product_id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].product_id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},
			// 全选上架
			// shelvesAll() {
			// 	this.$http.post('/api/admin/shop/product/setStatus',{id_lst:this.shelvesAlls, status:1}).then(res => {
			// 		if(res.code == 1) {
			// 			this.init();
			// 			this.checkBoxAll = [];
			// 			if(this.checkBoxAll.length == 0) {
			// 				this.checkAll = false;
			// 			}
			// 		}
			// 	});
			// },
			handleSizeChange(val) {
				this.pageSize = val;
				this.init();
			},
			handleCurrentChange(val) {
				this.page = val;
				this.init();
			},
      	// 跳转到商品详情
			handerNewShop(i){
        		console.log(i,696969);
				let id = i;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				this.checkAll = false
				this.$router.push({name:'newShop',query:{id}});
			},
			// 删除
			del(i) {
			    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning'
			    }).then(() => {
					  // let id_lst = i
					let params = {
						id_lst:i,
						store_id:this.store_id
					}
					this.$http.post('/api/admin/shop/product/del', params).then(res => {
						if(res.code == 1) {
							this.$message.success('删除成功')
							this.init();
							this.checkBoxAll = [];
							this.shelvesAlls = [];
							this.checkAll = false
						}
					})
			    }).catch(() => {});
			},
			// 选中删除
			selectDel(){
				if (!this.shelvesAlls.length) {
					this.$message.warning('请选择要删除的商品')
					return
				}
				this.$confirm('此操作将永久删除选中商品, 是否继续?', '提示', {
				    confirmButtonText: '确定',
				    cancelButtonText: '取消',
				    type: 'warning'
				}).then(() => {
					let params = {
						id_lst:this.shelvesAlls.join(','),
						store_id:this.store_id
					}
					this.$http.post('/api/admin/shop/product/del',params).then(res => {
						if(res.code == 1) {
							this.$message.success('删除成功')
							this.init();
							this.checkBoxAll = [];
							this.shelvesAlls = [];
							this.checkAll = false
						}else{
							this.$message.warning(res.msg)
						}
					});
				}).catch(() => {});
			},
			// 筛选
			handerChange(e){
				this.value = e[e.length - 1];
				this.init();
			},
			// 搜索关键字
			handerSearch() {
				this.init();
			},
			// 恢复
			restore(v) {
				// let id_lst = v.toString();
				let params = {
					id_lst:v.toString(),
					recycle:1,
					store_id:this.store_id
				}
				this.$http.post('/api/admin/shop/product/recovery',params).then(res => {
					if(res.code == 1) {
						this.$message({
							message: '恢复成功',
							type: 'success'
						});
						this.init();
						this.checkBoxAll = [];
						this.shelvesAlls = [];
						this.checkAll = false
					}
				})
			},
			// 消息提示
			openCenter() {
			    this.$message({
			        message: '删除成功',
					type:'success',
					duration: 2000,
			        center: true
			    });
			}
		},
	}
</script>

<style lang="less" scoped>
	@import 'recycle.less';
</style>
